<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<link href="./css/mui.css" rel="stylesheet"/>
	<link href="./css/mui.min.css" rel="stylesheet"/>
	<link href="./css/app.css" rel="stylesheet"/>
</head>
<body>
	<!-- 头部TITLE -->
	<header class="mui-bar mui-bar-nav mui-bar-transparent">
		<h1 class="mui-title app-header">
			<a href="#">竖屏</a>
			&nbsp; &nbsp; 
			<a href="#">宽屏</a>
		</h1>
	</header>
	<!-- 头部TITLE -->
	
	<!-- 主体部分 -->
	<div class="mui-content" id="refresh">
<!-- 		<div class="mui-card">
			<div class="mui-card-header">页眉</div>
			<div class="mui-card-content app-v-con">
				<video poster="" src="http://q5s8sdnd2.bkt.clouddn.com/%E4%BC%A0%E8%AF%B4%E4%B8%AD%E7%9A%84%E6%B5%B7%E5%B8%82%E8%9C%83%E6%A5%BC%E5%8F%AF%E4%BB%A5%E5%9C%A8%E8%BA%AB%E8%BE%B9%EF%BC%8C%E4%BD%A0%E8%A6%81%E4%BD%A0%E6%84%BF%E6%84%8F%EF%BC%81.mp4" type="video/mp4" name="media" width="100%" controls controlsList="nodownload" preload="auto" id="video-1"></video>
			</div>
			<div class="mui-card-footer">描述</div>
		</div> -->
<!-- 		<div class="mui-card">
			<div class="mui-card-content">
				<img src="imgs/tmp.png">
			</div>
			<div class="mui-card-footer">描述</div>
		</div> -->
	</div>
	<br><br>
	<!-- 主体部分 -->
	
	<!-- 底部菜单 -->
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" onclick="jumpToIndex()">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item" onclick="jumpToMarket()">
			<span class="mui-icon mui-icon-download"></span>
			<span class="mui-tab-label">库</span>
		</a>
<!-- 		<a class="mui-tab-item" onclick="jumpToMarket()">
			<span class="mui-icon mui-icon-download"></span>
			<span class="mui-tab-label">广场</span>
		</a> -->
<!-- 		<a class="mui-tab-item" onclick="jumpToCamera()">
			<span class="mui-icon mui-icon-camera"></span>
			<span class="mui-tab-label">拍</span>
		</a> -->
		<a class="mui-tab-item" onclick="jumpToChat()">
			<span class="mui-icon mui-icon-chatbubble"></span>
			<span class="mui-tab-label">消息</span>
		</a>
		<a class="mui-tab-item" onclick="jumpToMy()">
			<span class="mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
	<!-- 底部菜单 -->
</body>
</html>


<script src="./js/mui.js"></script>
<!-- <script src="./js/mui.min.js"></script> -->
<script src="./js/app.js"></script>
<script type="text/javascript">
	mui.init({
		//下拉、上拉刷新
        pullRefresh: {
            container: "#refresh",
            down: { //下拉刷新
				style: "circle",
				height: 200,
				auto: true,
                contentrefresh: "视频正在加载...",
                contentnomore: '没有更多视频了',
                callback: async function () { 
					mui.toast('刷新视频加载中...',{ 
						duration:'short', type:'div',
					});
					setSys(); //参数更新
					getIndex();
					mui('#refresh').pullRefresh().endPulldownToRefresh(); 
                }
            },
            up: { //上拉加载
                height: 500, //可选.默认50.触发上拉加载拖动距离
                auto: false, //可选,默认false.自动上拉加载一次
                contentrefresh: "更多视频正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
                contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
                callback: async function () { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					mui.toast('更多视频加载中...',{ 
						duration:'short', type:'div',
					});
					// setSys(); //参数更新
					getIndex();
                }
            }
        }
    });
	//播放
	function play(){
	    myVideo.play();
	}
	//暂停
	function pause(){
	    myVideo.pause();
	}
	// //自动加载
	// (function($, owner) {
	// 	setSys(); //参数更新
	// 	// return
	// 	getIndex(); //数据列表
	// }(mui, window.app = {}));
	//获取列表
	function getIndex(){
		var sys = getSys();
		// mui.toast('day：'+sys.day); 
		// return
		if (sys.day==0) {
			mui.toast('域名错误',{ 
				duration:'long', type:'div',
			});
			return
		}
		// console.log(sys.domain); return
		var resList = getIndexCache(); //数据缓存
		var startp = resList.pageStart;
		var sizep = resList.pageSize;
		var totalp = resList.pageTotal;
		mui.ajax(sys.domain+'/app/video/index',{
			data:{
				appAccess: sys.appAccess,
				page: startp,
				size: sizep
			},
			dataType:'json',//服务器返回json格式数据
			type:'post',//HTTP请求类型
			timeout:10000,//超时时间设置为10秒；
			// headers:{'Content-Type':'application/json'},
			headers:{'Content-Type':'application/x-www-form-urlencoded'}, 
			success:function(res){
				// console.log('OK');
				if (res.code!=0) {
					mui.toast(res.msg+'！',{ 
						duration:'short', type:'div',
					});
					return
				}
				var vs = res.data;
				// console.log(vs)
				var i, list = '';
				for (i=0;i<vs.length;i++) {
					list += '<div class="mui-card app-v">';
					list += '<div class="app-v-title">'+vs[i].videoName+'</div>';
					list += '<div class="mui-card-content">';
					list += '<video poster="" src="'+vs[i].videoLink+'" type="video/mp4" name="media" width="100%" controls controlsList="nodownload" preload="auto" id="video-'+vs[i].videoId+'"></video>';
					list += '';
					list += '</div>';
					// list += '<div class="mui-card-footer">'+vs[i].videoName+'</div>';
					list += '</div>';
				}
				indexList = indexList ? indexList+list : list;
				mui("#refresh")[0].innerHTML = indexList;
				// cacheSet(indexList,indexList);
				setIndexCache(indexList, startp, sizep, totalp);
			},
			error:function(xhr,type,errorThrown){
				// console.log('网络错误');
				mui.toast('网络错误！',{ 
					duration:'short', type:'div',
				});
			}
		});
	}
	//获取数据缓存
	function getIndexCache(){
		var resList = cacheGet(indexList);
		if (!resList) {
			return {
				// 数据拼接字符串
				list: resList.list,
				// 当前页码
				pageStart: 1,
				// 当前记录数
				pageTotal: 0
			};
		}
		return resList;
	}
	//设置数据缓存
	function setIndexCache(index,start,size,total){
		var resList = cacheGet(indexList);
		var list = '',  //数据字符串
			pageStart = 1, //当前页码
			pageSize = 0, //每页记录数
			pageTotal = 0; //记录总数
		if (!resList) {
			list = index;
			pageStart = start;
			pageSize = size;
			pageTotal = total;
		} else {
			list = resList.list + index;
			pageStart = resList.pageStart + start;
			pageSize = resList.pageSize + size;
			pageTotal = resList.pageTotal + total;
		}
		var indexList = {
			// 数据拼接字符串
			list: index,
			// 当前页码
			pageStart: pageStart,
			// 每页记录数
			pageSize: pageSize,
			// 当前记录数
			pageTotal: pageTotal
		};
		cacheSet(indexList, indexList);
	}
</script>